<!--
@fucntion: 路由管理
-->
<template>
<div class="module-system-route">
  <el-row style="height:50%;">
    <el-col style="height:100%;">
      <table-panel :name="'路由信息'" :columns="routeColumns" :tableData="routeData" :showRowNumber="false" :multiSelection="false"
      :usePagination="false" 
      :canCreate="authorities.create" :canEdit="authorities.edit" :canDelete="authorities.delete"
      :currentPage="routeCurrentPage" :totalNum="routeTotalNum" @page-change="onPageChange('route',$event)" :pageSize="pageSize"
      @table-searching="onSearching('route',$event)"
      @table-create="onCreate('route',$event)" @table-edit="onEdit('route', $event)"
      @table-delete="onDelete('route',$event)" @table-export="onExport('route',$event)"
      @current-change="onCurrentChange('route',$event)"></table-panel>
    </el-col>
  </el-row>
  <el-row style="height:50%;">
    <el-col style="height:100%;">
      <table-panel :name="'操作信息'" :columns="operationColumns" :tableData="operationData" :showRowNumber="true" :multiSelection="false"
      :usePagination="false"
      :canCreate="authorities.create" :canEdit="authorities.edit" :canDelete="authorities.delete"
      :currentPage="operationCurrentPage" :totalNum="operationTotalNum" @page-change="onPageChange('operation',$event)" :pageSize="pageSize"
      @table-searching="onSearching('operation',$event)"
      @table-create="onCreate('operation',$event)" @table-edit="onEdit('operation', $event)"
      @table-delete="onDelete('operation',$event)" @table-export="onExport('operation',$event)"
      ></table-panel>
    </el-col>
  </el-row>
  <el-dialog title="路由信息" width="40%" :visible.sync="routeDlgVisible">
    <el-form ref="routeForm" :model="routeRecord" :rules="routeRules"
    label-position="right" label-width="80px" size="mini" status-icon>
      <el-form-item label="名称" prop="name">
        <el-input v-model="routeRecord.name"></el-input>
      </el-form-item>
      <el-form-item label="别名" prop="alias">
        <el-input v-model="routeRecord.alias"></el-input>
      </el-form-item>
      <el-form-item label="图标" prop="iconCls">
        <el-input v-model="routeRecord.iconCls"></el-input>
      </el-form-item>
      <el-form-item label="路由" prop="path">
        <el-input v-model="routeRecord.path"></el-input>
      </el-form-item>
      <el-form-item label="组件" prop="component">
        <el-input v-model="routeRecord.component"></el-input>
      </el-form-item>
      <el-form-item label="父路由" prop="parent">
        <el-select v-model="routeRecord.parent" placeholder="请选择职称">
          <template v-for="item in routeData">
            <el-option v-if="routeRecord.code != item.code"
              :key="item.code"
              :label="item.name"
              :value="item.code">
              <span style="float: left">{{ item.name }}({{item.path}})</span>
              <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.code }}</span>
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-checkbox v-model="routeRecord.keepAlive" label="保持渲染" true-label="1" false-label="0">
      </el-checkbox>
      <el-checkbox v-model="routeRecord.requireAuth" label="需要权限" true-label="1" false-label="0">
      </el-checkbox>
      <el-checkbox v-model="routeRecord.showOnMenu" label="显示为菜单" true-label="1" false-label="0">
      </el-checkbox>
      <el-form-item label="备注" prop="note">
        <el-input type="textarea" v-model="routeRecord.note"></el-input>
      </el-form-item>
      <el-row>
        <el-button @click="onConfirm('route', $event)" type="primary" size="mini">确定</el-button>
        <el-button @click="routeDlgVisible=false" size="mini">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog title="操作信息" width="20%" :visible.sync="operationDlgVisible">
    <el-form ref="operationForm" :model="operationRecord" :rules="operationRules"
    label-position="right" label-width="90px" size="mini" status-icon>
      <el-form-item label="所属路由" prop="name">
        <el-input v-model="operationRecord.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="路由" prop="path">
        <el-input v-model="operationRecord.path" readonly></el-input>
      </el-form-item>
      <el-form-item label="操作名称" prop="czmc">
        <el-input v-model="operationRecord.czmc"></el-input>
      </el-form-item>
      <el-form-item label="操作别名" prop="czbm">
        <el-input v-model="operationRecord.czbm"></el-input>
      </el-form-item>
      <el-checkbox v-model="operationRecord.sfqy" label="是否启用" true-label="1" false-label="0">
      </el-checkbox>
      <el-row>
        <el-button @click="onConfirm('operation', $event)" type="primary" size="mini">确定</el-button>
        <el-button @click="operationDlgVisible=false" size="mini">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog> 
</div>
</template>
<script>
import TablePanel from "@/components/basic/TablePanel.vue";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import {
  trueFalseRenderer
} from "@/utils/tableutils.js";

//meta info
var route = "route";// 表格名称
var op = "operation";//

var columnsAttr = "Columns";// 列
var dataAttr = "Data";// 数据
var selectionAttr = "Selection";// 选中
var dlgVisibleAttr = "DlgVisible";// 对话框
var formAttr = "Form";
var recordAttr = "Record";// 表单模型
var rulesAttr = "Rules";// 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 路由信息-列
var routeColumns = [
  {
  prop:"code",
  label:"编码"
  },
  {
    prop: "name",
    label: "名称",
    rules: [{
      required: true,
      message: "请输入名称",
      trigger: "blur"
    }]
  }, 
  {
    prop: "alias",
    label: "别名",
  }, 
  {
    prop: "iconCls",
    label: "图标",
  }, 
  {
    prop: "path",
    label: "路径",
    rules: [{
      required: true,
      message: "请输入路径，用/开头",
      trigger: "blur"
    }]
  }, 
  {
    prop: "component",
    label: "对应组件",
    rules: [{
      required: true,
      max:50,
      message: "小于50个字符",
      trigger: "blur"
    }]
  }, 
  {
    prop: "parent",
    label: "父路由编号",
    hidden:true,
    width:95
  }, 
  {
    prop:"parentName",
    label:"父路由",
    width:95
  },
  {
    prop: "keepAlive",
    label: "保持渲染",
    width:80,
    align:"center",
    headerAlign:"center",
    renderer: trueFalseRenderer
  }, 
  {
    prop: "requireAuth",
    label: "需要权限",
    width:80,
    align:"center",
    headerAlign:"center",
    renderer: trueFalseRenderer
  },
  {
    prop: "showOnMenu",
    label: "显示为菜单",
    width:95,
    align:"center",
    headerAlign:"center",
    renderer: trueFalseRenderer
  },
  {
    prop: "note",
    label: "备注",
  }
];

// 操作信息-列
var operationColumns = [
  {
    prop: "czbh",
    label: "编号",
    width: 90
  }, 
  {
    prop:"code",
    label:"路由编号",
    outOfSearch:true,
    hidden:true
  },
  {
    prop:"name",
    label:"路由名称",
    width: 200
  },
  {
    prop:"path",
    label:"路由",
    width: 250
  },
  {
  prop: "czmc",
  label: "名称"
  }, 
  {
    prop: "czbm",
    label: "操作别名"
  },
  {
    prop: "sfqy",
    label: "是否启用",
    type:"boolean",
    width: 80,
    align:"center",
    headerAlign:"center",
    renderer: trueFalseRenderer
  }
];

export default {
  components:{
    "table-panel": TablePanel
  },
  methods:{
    onSearching: function(tname, params) {// 查询
      var me = this;
      let url = "";
      if(tname === route) {
        url= "/sysVuelyxxb";// /static/data/routes2.json
      }else if(tname === op) {
        url= "/sysCzxxb";// /static/data/system/operations.json
      }

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data;
              // me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }

    },
    onCreate: function(tname) {// 新增
      var me = this;
      me[tname+recordAttr] = formModelInitFromTable(me[tname+columnsAttr]);
      if(tname === route){
        me[tname+dlgVisibleAttr] = true;
      }else if(tname === op){
        let selected = me[route+selectionAttr];
        console.log("select=",selected);
        if(selected.hasOwnProperty("code")) {
          me[tname+recordAttr].code = selected.code;
          me[tname+recordAttr].name = selected.name;
          me[tname+recordAttr].path = selected.path;
          me[tname+recordAttr].sfqy = "1";

          me[tname+dlgVisibleAttr] = true;
        }else{
          me.$message.info("请选中一个'路由'来添加操作");
        }
      }
    },
    onEdit: function(tname, row) {// 编辑
      var me = this;
      me[tname + recordAttr]= row;
      me[tname + dlgVisibleAttr] = true;
    },
    onDelete: function(tname, row) {// 删除
      var me = this;
      let url = "";
      if(tname === route) {
        url= `/sysVuelyxxb/${row.code}`;// /static/data/routes2.json
      }else if(tname === op) {
        url= `/sysCzxxb/${row.czbh}`;// /static/data/system/operations.json
      }
      me.$confirm("确定删除这条记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        me.deleteRequest(url).then((resp)=>{
          if(resp.status == 200) {
            me.$message.success("删除成功!"+resp.data.msg);
            me.onSearching(tname,{});// 重新加载表格数据
          }else{
            me.$message.error("删除失败！"+resp.data.msg);
          }
        });
      }).catch(() => {});

    },
    onExport: function(tname, params) {// 导出
      var me = this;
      me.$message({
        type: "info",
        message: "发送导出请求，返回下载路径"
      });
    },
    onCurrentChange:function(tname,row){// 选中改变
      var me = this;
      me[tname+selectionAttr] = row;
    },
    onConfirm:function(tname) {// 对话框-确认
      var me = this;
      // 验证信息
      var ret;
      me.$refs[tname + formAttr].validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message({
          message: "表单信息有误",
          type: "error"
        });
        return;
      }
      var url = "";
      if(tname === route) {
        url= "/sysVuelyxxb";// /static/data/routes2.json
      }else if(tname === op) {
        url= "/sysCzxxb";// /static/data/system/operations.json
      }

      if(url !== "") {
        // 发送请求
        me.postRequest(url, me[tname+recordAttr]).then((resp)=>{
          if (resp.status == 200) {
            me.$message.success("提交成功！");
            
            me[tname + dlgVisibleAttr] = false;//隐藏对话框
            me.onSearching(tname,{});// 重新加载
          } else {
            me.$message.error("服务器发生错误，代码：" + resp.status);
          }
        });
      }
     

    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "";

      if(tname === route) {
        url= "/sysVuelyxxb";// /static/data/routes2.json
      }else if(tname === op) {
        url= "/sysCzxxb";// /static/data/system/operations.json
      }
      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data;
              // me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }

    }
  },
  data(){
    return {
      authorities:{
        create:true,
        edit:true,
        delete:true,
        search:true
      },// 权限控制
      [route+columnsAttr]: routeColumns,// 表格-列
      [route+dataAttr]: [],// 表格的数据
      [route+selectionAttr]:{},// 当前选中
      [route+dlgVisibleAttr]:false,// 对话框是否可见
      [route+recordAttr]:{},// 表单模型
      [route+rulesAttr]:{},// 表单验证
      [op+columnsAttr]: operationColumns,// 表格-列
      [op+dataAttr]: [],// 表格的数据
      [op+selectionAttr]:[],// 当前选中
      [op+dlgVisibleAttr]:false,// 对话框是否可见
      [op+recordAttr]:{},// 表单模型
      [op+rulesAttr]:{},// 表单验证
      [route+curPageAttr]:1,// 当前页
      [route+totalNumAttr]:0,// 总数
      [route+qParamAttr]:{},// 查询参数
      [op+curPageAttr]:1,// 当前页
      [op+totalNumAttr]:0,// 总数
      [op+qParamAttr]:{},// 查询参数
      pageSize:20// 每页数量
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[route+recordAttr] = formModelInitFromTable(me[route+columnsAttr]);
    // 表单验证初始化
    me[route+rulesAttr] = formRulesInitFromTable(me[route+columnsAttr]);
    // 表单模型初始化
    me[op+recordAttr] = formModelInitFromTable(me[op+columnsAttr]);
    // 表单验证初始化
    me[op+rulesAttr] = formRulesInitFromTable(me[op+columnsAttr]);

    me.onSearching(route,{});

  }
}
</script>
<style lang="scss">

.module-system-route{
  height:100%;
}

</style>
